<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  </style>
</head>
<body>
  <span>0</span>
  <div class="box" abc="123" id="cont" title="这是title">
    <span>1</span>
    hello
    <!-- 这是注释 -->
    <span>2</span>
  </div>
  <em>1</em>
</body>
<script>

  var box = document.querySelector(".box");

  var child = box.childNodes;

  // 所有子节点
  console.log( child );

  // 元素
  console.log( child[1] );
  console.log( child[1].nodeType );
  console.log( child[1].nodeName );
  console.log( child[1].nodeValue );
  // 属性
  console.log( box.attributes[0] );
  console.log( box.attributes[0].nodeType );
  console.log( box.attributes[0].nodeName );
  console.log( box.attributes[0].nodeValue );
  // 文本
  console.log( child[2] );
  console.log( child[2].nodeType );
  console.log( child[2].nodeName );
  console.log( child[2].nodeValue );
  // 注释
  console.log( child[3] );
  console.log( child[3].nodeType );
  console.log( child[3].nodeName );
  console.log( child[3].nodeValue );
  // 根节点
  console.log( document );
  console.log( document.nodeType );
  console.log( document.nodeName );
  console.log( document.nodeValue );


  // ↑↑↑父选所有子节点
  // ======

  // 父选第一个子节点
  console.log( box.firstChild );
  // 父选最后一个子节点
  console.log( box.lastChild );
  // 上一个兄弟
  console.log( box.previousSibling );
  // 下一个兄弟
  console.log( box.nextSibling );


</script>
</html>